"use client";
import { usePathname } from "next/navigation";
import React from "react";
import Image from "next/image";
import icoSrc from "@/assets/favicon.ico";
import SwitchTheme from "./SwitchTheme";
import Link from "next/link";

const tabs = [
  {
    name: "首页",
    path: "/homepage",
  },
  {
    name: "文章",
    path: "/articles",
  },
  {
    name: "随记",
    path: "/diarys",
  },
  {
    name: "标签",
    path: "/tabs",
  },
];

export default function Header() {
  const pathname = usePathname();
  return (
    <div className="fixed top-0 left-0 w-screen h-[60px] dark:bg-[#18191a] dark:border-[#29292b] bg-[#f6eedc] select-none z-[99] shadow-md">
      <div className="w-full md:max-w-[1200px] h-full m-auto flex justify-between items-center px-3 md:px-1 text-base md:text-xl">
        {/* Logo */}
        <div className="h-[60%]">
          <Image
            src={icoSrc}
            priority
            alt="ReindeerのRoom default avatar"
            className="w-auto h-full"
          />
        </div>

        {/* Tabs - 桌面显示，移动端隐藏 */}
        <div className="flex">
          {tabs.map((tab, i) => (
            <Link
              href={tab.path}
              key={i}
              className={`px-[8px] py-[4px] mx-[10px] rounded-lg text-center cursor-pointer hover:text-yellow-600 ${
                pathname === tab.path && "text-yellow-600"
              }`}
            >
              {tab.name}
            </Link>
          ))}
        </div>

        {/* 移动端菜单按钮 */}
        {/* <div className="flex md:hidden items-center gap-2">
          <button className="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700">
            📋
          </button>
        </div> */}

        {/* 桌面主题切换 */}
        <div>
          <SwitchTheme />
        </div>
      </div>
    </div>
  );
}
